<!--  -->
<template>
  <div class="wrap" :loading="loading">
    <div class="leftbg" id="elecData_father">
      <div class="xDeepseek">
        <img src="../assets/logo2@2x.png" alt="">
      </div>
      <div class="introductionText">
        <span style="font-size: 27px;color:#fff;font-weight:600;">企智库人工智能数据分析管理系统</span>
        <span style="font-size: 16px;color:#fff;">集网络加速、安全防护与智能服务于一体，</span>
        <span style="font-size: 16px;color:#fff;">内置高性能网络加速防火墙，保障数据传输安全与流畅；</span>
        <span style="font-size: 16px;color:#fff;">搭载人工智能助手，提供智能运维与实时决策支持；</span>
        <span style="font-size: 16px;color:#fff;">支持Deepseek本地化部署及企业智库构建，满足企业定制化需求，助力高效管理与业务创新。</span>
        <span style="font-size: 16px;color:#fff;">专为企业打造，安全、智能、高效！</span>
      </div>
      <CanvasParticles />
    </div>
    <div class="main">

      <div class="login">
        <div class="login-method">
          <!-- <div>
            <img src="../../assets/logo@2x.png" alt="" style="width:100px;">
          </div> -->
          <div>
            <!-- <el-select v-model="lang" size="small" style="width:100px;">
              <el-option label="中文" value="zh"></el-option>
              <el-option label="English" value="en"></el-option>
            </el-select> -->
            <!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
              <div style="text-align:center;">
                <span><svg-icon icon-class="international" style="margin-right:10px;" />{{ getLangName(lang) }}<i
                    class="el-icon-arrow-down el-icon--right"></i></span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="changeLang('zh')">简体中文</el-dropdown-item>
                <el-dropdown-item @click.native="changeLang('en')">English</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </div>
        </div>
        <div class="login-name">
          <div>
            <img src="../assets/logo@2x.svg" alt="" style="width:80px;margin-bottom:30px;">
            <p style="font-size:24px;color:#333333;font-weight: 700;margin:0;white-space: nowrap;">{{ companyName }}</p>
            <!-- <p style="font-size:12px;color:#a29ca2;margin:8px;">软件版本-v3.0.22</p> -->
            <!-- <p style="font-size:12px;color:#a29ca2;margin:8px;">软件部署-v3.0.22</p> -->
          </div>
        </div>
        <div class="login-form">
          <el-form :model="loginForm" :rules="rules" ref="loginForm" :show-message=false>
            <el-form-item prop="username">
              <span style="font-size:14px;color:#666666;">用户名</span>
              <el-input v-model="loginForm.UserID" placeholder="请输入用户名" @keyup.enter="loginEnterFun" clearable
                oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="10">
                <template #suffix>
              <i 
                style="cursor: pointer" 
                @click="clearUserID"
                class="el-icon-circle-close"
              ></i>
            </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="Password">
              <span style="font-size:14px;color:#666666;">密码</span>
              <el-input v-model="loginForm.Password"  placeholder="请输入密码" show-password  type="password"
                @keyup.enter="loginEnterFun" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="32"/>
            </el-form-item>
            <el-checkbox v-model="checked"><span style="color: #B3B3B3;">我已阅读同意</span> <span @click.prevent="showAgreement">用户使用协议 </span>
              <span @click.prevent="showDataAgreement"> 用户数据处理协议</span></el-checkbox>
              <UserAgreement ref="agreement" @agree="handleAgree" @disagree="handleDisagree" />
              <DataAgreement ref="DataAgreement" @agree="handleAgree" @disagree="handleDisagree" />
            <el-form-item class="form-submit">
              <el-button type="primary" class="submit" @click="login('loginForm')" :disabled="!checked">立即登录</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
      <div class="download">
        <el-link type="primary" :underline="false" @click="DownloadFile('企智库助手.rar')" style="margin-right:10px;">下载企智库客户端</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import { LoginEmployee, downloadfile, connrequest} from '../api/connrequest'
import UserAgreement from './components/UserAgreement.vue'
import DataAgreement from './components/DataAgreement.vue'
import CanvasParticles from './components/CanvasParticles.vue'
export default {
  components: {
    CanvasParticles,
    UserAgreement,
    DataAgreement
  },
  data() {
    return {
      loading: false,
      type: false,
      checked: true,
      loginForm: {
        UserID: '',
        Password: ''
      },
      //配置属性
      config: {
        color: "255, 255, 255",
        opacity: 1,
        zIndex: 5,
        count: 50,
      },//配置炫酷效果
      rules: {
        UserID: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        Password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      companyName: '',
      // loginLogoIcon: '',
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // this.companyName = process.env.NODE_ENV === 'development' ? '熊猫出海AI大使' : Glod.companyName
    this.companyName = '企智库人工智能数据分析管理系统'
    if (this.$route.query.error) {
      this.$message.error(decodeURIComponent(`${this.$route.query.error}${"。请进行输入登录"}`));
    } 
  },
  computed: {
    
  },
  watch: {
    lang() {
      this.setOptions()
    }
  },
  methods: {
    async changeLang(val) {
      this.lang = val
      const data = {
        Data: {
          Language: val
        }
      }
      await getLanguage('SetLanguage', data)
    },
    showAgreement() {
      this.$refs.agreement.openDialog()
    },
    showDataAgreement(){
      this.$refs.DataAgreement.openDialog()
    },
    handleAgree() {
      // 用户同意协议后的逻辑
      this.checked = true
      this.$message.success('已同意用户使用协议')
    },
    handleDisagree() {
      // 用户不同意的处理
      this.checked = false
      this.$message.warning('需同意协议方可继续使用')
    },
    getLangName(val) {
      let langName = ''
      switch (val) {
        case 'zh':
          langName = '简体中文'
          break;
        default:
          langName = 'English'
          break;
      }
      return langName
    },
    // 获取语言
    async fetchLanguage() {
      const res = await getLanguage('GetLanguage');
      this.lang = res.Data?.Language || 'en'
    },
    setOptions() {
      if (this.isSettingOptions) return;
      this.isSettingOptions = true;
      this.companyName = '企智库人工智能数据分析管理系统'
      // 标志重置，可以根据需要选择更合适的时机来重置
      this.$nextTick(() => {
        this.isSettingOptions = false;
      });
    },
    loginEnterFun(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      var val = e.target.value;
      if (keyCode == 13 && val) {
        this.login('loginForm')
      }
    },
    async login(loginForm){
      this.loading = true
      this.$refs[loginForm].validate(async(valid) => {
        if( valid ){
          if(this.loginForm.UserID.length > 32){
            this.$message.error('用户名长度过长')
            return false
          }
          if(this.loginForm.Password.length > 32){
            this.$message.error('密码长度过长')
            return false
          }
          // this.$store.dispatch('user/login', this.loginForm)
          const data = {
            Data:{
              UserID: btoa(this.loginForm.UserID),
              Password: btoa(this.loginForm.Password)
            }
          }
          try {
            const res = await LoginEmployee(data)
            if(res.Status.StatusCode === 0){
              sessionStorage.setItem('userName',this.loginForm.UserID)
              sessionStorage.setItem('gptToken', res.Token)
              sessionStorage.setItem('Name', res.Data.Name)
              sessionStorage.setItem('AiMode', JSON.stringify(res.Data.AiMode))
              sessionStorage.setItem('AiTimeOut', res.Data.AiTimeOut)
              sessionStorage.setItem('RightAI', res.Data.RightAI)
              sessionStorage.setItem('AvailableKnowledgeClass', JSON.stringify(res.Data.AvailableKnowledgeClass))
        
              try{
                  const res = await connrequest("GetUserPreference")
                  const data = res?.Data?.GPT?.isNightMode ? res.Data.GPT.isNightMode : 'night';
                  localStorage.setItem("isNightMode",data);
                }
                catch(error){
                  console.log("获取主题数据失败",error);
              }

              this.$router.push('/AI/chat')

            }else{
              this.$message.error(res.Status.Msg2Client)
            }
          } catch (error) {
            this.$message.error('服务器错误')
          }
          // .then(() => {
          //   this.$router.push({ path: '/' })
          //   this.loading = false
          // })
          // .catch(() => {
          //   this.loading = false
          // })
        }
        else{
          this.loading = false
          this.$message.error('请输入账号密码')
          return false
        }
      })
    },
    async DownloadFile(fileName) {
      let protocol = window.location.protocol
      let hostname = window.location.hostname;
      let port = window.location.port || (window.location.protocol === 'https:' ? '443' : '80');
      let softwareName = `${protocol}//${hostname}:${port}/${fileName}`
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = softwareName;
      a.click();
      a.remove();
    },
  }
};
</script>
<style scoped lang='scss'>
.theme {
  margin: 20px;
  display: flex;
  flex-direction: column;

  a {
    cursor: pointer;
    padding-bottom: 10px;

    &:hover {
      color: #06b4fd;
    }
  }
}

.wrap {
  // position: relative;
  display: flex;
  align-items: center;
  height: 100vh;

  .leftbg {
    position: relative;
    background-size: cover !important;
    background:  #2491fc url("../assets/bg@2x.png")  no-repeat;
    // background: #5b4d43 url("../assets/login2.jpg") center top no-repeat;
    width: 60vw;
    height: 100vh;
    .xDeepseek{
      width: 235px;
      position: absolute;
      left: 45px;
      top: 40px;
      img{
        width: 100%;
      }
    }

    .introductionText {
      position: absolute;
      top: 35vh;
      left: 138px;
      display: flex;
      flex-direction: column;

      span {
        padding-bottom: 10px;
      }
    }
  }

  .lg-title {
    font-size: 45px;
    text-align: left;
    letter-spacing: 11px;
    font-weight: bold;
    color: #b4946e;
    padding: 30px 120px;
    // background: linear-gradient(to right, #1743ff, #00b3ff);
    // background-clip: text;
    // color: transparent;
  }

  .main {
    background: #fff;
    position: relative;
    width: 40vw;
    height: 100vh;
    background-size: auto 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-method {
      position: absolute !important;
      top: 85px;
      width: 480px;
      padding: 0px 10px;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }

    .download {
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: #d6b086 !important;
    }

    .login {
      color: #d6b086;
      width: 480px;
      background: rgba(255, 255, 255, .9);
      border-radius: 10px;

      &-name {
        font-size: 20px;
        text-align: center;
        padding: 5px 25px;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon-anquandunpai {
          font-size: 24px;
          padding-right: 10px;
          color: #957d61;
        }

        span {
          line-height: 40px;
          // font-weight: bold;
        }
      }

      &-form {
        padding: 30px 25px;

        :deep(.el-input) {
          height: 45px;
          line-height: 45px;
          background: #fff;
          border: 1px solid #eee;
          border-radius: 5px;

          .el-input__inner {
            font-size: 16px;
            text-indent: 6px;
            color: #000;
            background: none;
            border: none;
          }

          .el-input__inner::placeholder {
            color: #B3B3B3;
          }


        }

        .form-submit {
          margin: 0 auto;
        }

        .submit {
          width: 100%;
          height: 45px;
          font-size: 18px;
          letter-spacing: 3px;
          text-indent: 10px;
          text-align: center;
          background: #3c5ca4;
          border: none;
          margin: 25px auto 0px;
          border-radius: 5px;
          &:hover {
            background: #4a73d1;
          }
          &.is-disabled {
            background: #8cc8ff;
          }
        }
      }

      &-method {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 55px;
        font-size: 20px;
        text-align: center;
        background: rgba(255, 255, 255, .8);
        border-radius: 10px;

        img {
          width: 30px;
          margin-right: 10px;
          // border-radius: 30px;
          // background: rgba(255, 255, 255, .8)
        }

        div {
          cursor: pointer;

          .iconfont {
            position: relative;
            font-size: 20px;
            padding-right: 10px;
            z-index: 2;
          }

          .icon-zhifubao {
            color: #06b4fd;
          }

          .icon-weixin {
            margin-left: 30px;
            color: #28c445;
          }
        }

        .yuan {
          position: absolute;
          width: 19px;
          height: 19px;
          background: #fff;
          border-radius: 50%;
        }

        .yuan1 {
          left: 218px;
        }

        .yuan2 {
          left: 338px;
        }
      }
    }
  }
}
</style>

<style>
/* 去掉记住密码填充样式 */
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #000;
}
</style>